import { defineStore } from 'pinia'
// @ts-ignore
import {ElLoading,ElMessage} from "element-plus";
import {getCurrentInstance} from "vue";
// @ts-ignore

export default defineStore('storeId', {
    // 其他配置...
    state: ()=>{
        return{
            // 原始数据商品列表
            proList:[],
            // 渲染数据
            searchList: []
        }
    },
    // pinia中的getters与vuex中的一摸一样
    getters: {
    },
    // 同步异步统一到actions中了
    actions: {
        // 加载动画
        loading():void {
            const load = ElLoading.service({
                lock: true,
                text: '数据库比对中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            setTimeout(():void => {
                load.close()
            }, 1000)
        },
        // 商品列表数据请求
        async http():Promise<void> {
            // @ts-ignore 获取全局的一个对象
            const {proxy} = getCurrentInstance()
            // console.log(proxy.$echarts)
            // 用解构的方式把数据解构出来使用并且赋值给proList、searchList
            // console.log(555, proxy.$axios)
            const {data: {data}} = await proxy.$axios.get('/json/tsconfig.json')
            this.proList = data
            this.searchList =data
        },
        //  商品数据proList组件中点击search执行筛选方法
        search(name:string):void{
            // @ts-ignore
            // 如果为null就把数据还原到所有数据
            if(name === null || name ===''){
                ElMessage({
                    type: 'warning',
                    message: '还原列表数据'
                })
                this.searchList = this.proList
            }else {
                ElMessage({
                    type: 'success',
                    message: '分类对应的数据展示如下'
                })
                // 筛选出数据赋给searchList
                this.searchList = this.proList.filter((item:any)=>item.name ===name)
            }
        },
        // 商品数据添加数据
        add(obj:any):void {
            console.log(111,obj)
            const arr = {
                name: obj.name,
                num: obj.num,
                price: obj.price,
                style: obj.style,
                key: this.proList.length+1
            }
            const length:number = this.proList.length
            //@ts-ignore
            this.proList.push(arr)
            this.proList = this.proList.reduce((acc:any, obj:any) => {
                // console.log(obj)
                const existingObj = acc.find((item:any) => JSON.stringify(`${item.name}`) === JSON.stringify(`${obj.name}`));
                console.log(existingObj)
                if (!existingObj) {
                    //@ts-ignore
                    acc.push(obj);
                }else {
                    // ElMessage({
                    //     type: 'warning',
                    //     message: '商品已经存在'
                    // })
                }
                return acc;
            }, []);
            if(this.proList.length === length){
                ElMessage({
                    message: '类型已经存在，请选则其他类型',
                    type: 'warning'
                })
            }else {
                ElMessage({
                    message: '添加成功',
                    type: 'success'
                })
            }
            this.searchList = this.proList
        },
        // 商品列表删除数据
        filterA(key: number):void{
            this.searchList = this.proList.filter((item:any):boolean =>item.key !==key)
            this.proList = this.searchList
        },
        // 商品列表修改数据
        edit(obj: object, key: any):void{
            this.proList.some((item:any)=>{
                if(item.key === key){
                    // @ts-ignore
                    item.name = obj.name
                    // @ts-ignore
                    item.num = obj.num;
                    // @ts-ignore
                    item.price = obj.price;
                    // @ts-ignore
                    item.style = obj.style
                    return true
                }
            })
        }
    }
});

export class useStore {
}
